<!--维修统计-->
<template>
  <div class="page-content">
    <div class="bg-white">
      <public-filter
        ref="publicFilter"
        v-model="queryParams"
        :init="selfParams"
        @onSearchData="selfParams"
      />
    </div>
    <div class="bg-white q-mt-lg infoList">
      <div v-for="item in infoList" :key="item.value" class="infoList-item">
        <div class="flex">
          <div>{{item.label}}</div>
          <div v-if="item.tips">
            <q-icon name="iconfont icontubiao-72" class="font-18 text-grey "/>
            <q-tooltip >{{item.tips}}</q-tooltip>
          </div>
        </div>
        <div class="flex items-center justify-center q-mt-sm">{{infoData[item.value]}}</div>
      </div>
    </div>
    <div class="info-main">
      <div class="info-main-item">
        <fault-duration ref="faultDuration"/>
      </div>
      <div class="info-main-item">
        <fault-chart ref="faultChart"/>
      </div>
      <div class="info-main-item">
        <ranking-duration ref="rankingDuration" />
      </div>
      <div class="info-main-item">
        <MTTR ref="MTTR"/>
      </div>
      <div class="info-main-item">
        <cost ref="cost"/>
      </div>
    </div>
  </div>
</template>
<script>
import PublicFilter from '../../statistics/components/public-filter'
import moment from 'moment'
import { getStatisticList } from '../../../boot/spare/parts'
import GetPublicDate from '../../statistics/components/get-publice-date'
import FaultDuration from './fault-duration'
import FaultChart from './fault-chart'
import RankingDuration from './ranking-duration'
import MTTR from './MTTR'
import Cost from './cost'
export default {
  name: 'maintenanceStatistics',
  components: { Cost, MTTR, RankingDuration, FaultChart, FaultDuration, PublicFilter },
  data () {
    return {
      queryParams: {
        // 查询区条件
        dateRange: [
          moment(new Date())
            .subtract(6, 'days')
            .toDate(),
          new Date()
        ],
        dateData: [
          moment(
            moment(new Date())
              .subtract(6, 'days')
              .toDate()
          ).format('YYYY-MM-DD'),
          moment(new Date()).format('YYYY-MM-DD')
        ],
        dateType: 'date',
        location: {
          id: ''
        }, // 所在位置
        devices: []
      },
      infoData: {},
      infoList: [{
        label: '故障次数',
        value: 'repairCount'
      }, {
        label: '委外维修次数',
        value: 'outSideCount'
      }, {
        label: '故障时长',
        value: 'faultDurationTime',
        tips: '即从维修申请到维修完成的总时长'
      }, {
        label: '平均响应时长',
        value: 'responseTime',
        tips: '即从维修申请到开始维修的平均时长'
      }, {
        label: '平均维修时长',
        value: 'repairTime',
        tips: '即从开始维修到维修结束的平均时长'
      }
      ]
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    checkParams () {
      // 条件校验，日期不能超过7天，5周，12月
      if (this.queryParams.dateType === 'date' && Math.abs(moment(this.queryParams.dateRange[1]).diff(this.queryParams.dateRange[0], 'days')) >= 7) {
        this.$message.warning('日期范围不可超过7天')
        return
      }
      if (this.queryParams.dateType === 'week' && Math.abs(moment(this.queryParams.dateRange[1]).diff(this.queryParams.dateRange[0], 'weeks')) >= 5) {
        this.$message.warning('日期范围不可超过5周')
        return
      }
      if (this.queryParams.dateType === 'month' && Math.abs(moment(this.queryParams.dateRange[1]).diff(this.queryParams.dateRange[0], 'months')) >= 12) {
        this.$message.warning('日期范围不可超过12月')
        return
      }

      const getPublicDate = new GetPublicDate(
        this.queryParams.dateRange,
        this.queryParams.dateType
      )
      switch (this.queryParams.dateType) {
        case 'date':
          this.queryParams.dateData = getPublicDate._setDay()
          break
        case 'week':
          this.queryParams.dateData = getPublicDate._setWeek()
          break
        case 'month':
          this.queryParams.dateData = getPublicDate._setYear()
          break
      }
      return true
    },
    selfParams () {
      this.checkParams() && this.getList()
    },
    getList () {
      getStatisticList(this.queryParams).then(res => {
        this.infoData = res
        this.$refs.faultDuration.initData(res.deviceFaultTimes || [])
        this.$refs.faultChart.initData(res.deviceFaultStatistics || [])
        this.$refs.rankingDuration.initData(res.userRepairTimes || [])
        this.$refs.MTTR.initData(res.deviceMttrStatistics || [])
        this.$refs.cost.initData(res.deviceCostStatistics || [])
      })
    }
  }
}
</script>
<style lang="scss">
.infoList{
  display: flex;
  align-content: center;
  justify-content: space-around;
  min-height: 100px;
  padding: 10px 0px;
  &-item{
    min-height: 80px;
    border: 1px solid #eee;
    padding: 10px 50px;
  }
}
.info-main{
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  justify-content: space-between;
  &-item{
    width: 49%;
    margin-bottom: 10px;
    min-height: 500px;
  }
  &-header{
    height: 50px;
    margin-left: 20px;
    line-height: 50px;
    font-weight: bold;
    font-size: 16px;
  }
}
</style>
